<template>
   <div class="fanhall-container">
       <IHeader class="header" title="范堂"></IHeader>
       <scroller class="wrap" @loadmore="loadMore" loadmoreoffset="50">
           <slider class="slider" interval="3000" auto-play="true" v-if="imageList.length > 0">
               <div class="frame" v-for="(item, index) in imageList" :key="index">
                   <image class="banner" resize="cover" :src="item.picture"></image>
               </div>
               <indicator class="indicator" :style="indicatorStyle"></indicator>
           </slider>
           <div class="gonggao" v-if="gongGaoList.length > 0">
               <div class="gonggaoCon">
                   <text class="name">最新公告</text>
                   <list class="marquee_list" :class="{marquee_top:animate}">
                       <cell class="list" v-for="(item, index) in gongGaoList" :key="index">
                           <text class="content">{{item.title}}</text>
                       </cell>
                   </list>
               </div>
           </div>
               <div class="detail" v-for="(item, index) in fanhallList" :key="index" @click="pushToDetail (item.id)">
                   <!--修改1-->
                   <div class="jingxuan" v-if="item.columnType === '2' && item.briefOverview.length > 0">
                       <div class="jingxuan-header">
                           <div class="contentatr">
                               <div class="article">
                                   <text class="tit1">{{item.title}}</text>
                                   <!--<text class="contentDetail">{{item.briefOverview}}</text>-->
                               </div>
                               <div class="payTime">
                                   <text class="timeText">发布时间：{{item.createTime}}</text>
                                   <div class="textWrap">
                                       <text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>
                                       <text class="yellowText">#{{item.description}}</text>
                                   </div>
                               </div>
                           </div>
                           <div class="pic">
                               <image v-if="item.pictures && item.pictures[0].picture" :src="item.pictures[0].picture" class="smImg"></image>
                           </div>
                       </div>
                   </div>
                   <div class="jingxuan" v-if="item.columnType === '1'" @click="pushToPicDetail(item.id, item.pictures)" >
                       <div class="jingxuan-header" v-if="item.pictures">
                           <image class="bigImg" v-if="item.pictures && item.pictures[0]"
                                  :src="item.pictures[0].picture"></image>
                           <div class="smllImg">
                               <image class="smallImg" v-if="item.pictures && item.pictures[1]"
                                      :src="item.pictures[1].picture"></image>
                               <image class="smallImg lastImg" v-if="item.pictures && item.pictures[2]"
                                      :src="item.pictures[2].picture"></image>
                           </div>
                       </div>
                       <div class="payTime payTimeContent">
                           <text class="timeText">发布时间：{{item.createTime}}</text>
                           <div class="textWrap">
                               <text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>
                               <text class="yellowText">#时尚大咖</text>
                           </div>
                       </div>
                   </div>
                   <!--<div class="jingxuan" v-if="item.columnType === '2' && item.briefOverview.length > 0"-->
                        <!--@click="pushToDetail (item.id)" :class="[index === fanhallList.length - 1 ? 'lastMargin' : '']">-->
                       <!--<div class="pictext">-->
                           <!--<text class="tit1 title">{{item.title}}</text>-->
                           <!--<image class="picCon" v-if="item.pictures && item.pictures[0]"-->
                                  <!--:src="item.pictures[0]"></image>-->
                           <!--<text class="contentDetail">{{item.briefOverview}}</text>-->
                       <!--</div>-->
                       <!--<div class="payTime payTimeContent">-->
                           <!--<text class="timeText">发布时间：{{item.createTime}}</text>-->
                           <!--<div class="textWrap" v-if="item.informationType === '1' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#新品咨询</text>-->
                           <!--</div>-->
                           <!--<div class="textWrap" v-if="item.informationType === '2' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#时尚在线</text>-->
                           <!--</div>-->
                           <!--<div class="textWrap" v-if="item.informationType === '3' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#活动推荐</text>-->
                           <!--</div>-->
                           <!--<div class="textWrap" v-if="item.informationType === '4' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#行业干货</text>-->
                           <!--</div>-->
                           <!--<div class="textWrap" v-if="item.informationType === '5' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#科技前沿</text>-->
                           <!--</div>-->
                           <!--<div class="textWrap" v-if="item.informationType === '6' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#管理服务</text>-->
                           <!--</div>-->
                           <!--<div class="textWrap" v-if="item.informationType === '7' ">-->
                               <!--<text class="yellowText marginLeft" v-if="item.isSelected === '1'">精选</text>-->
                               <!--<text class="yellowText">#染织布艺</text>-->
                           <!--</div>-->
                       <!--</div>-->
                   <!--</div>-->
                   <div class="xian" :class="[index === fanhallList.length - 1 ? 'lastMargin': '']"></div>
               </div>
       </scroller>
       <navBottom></navBottom>
       <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
   </div>
</template>

<script>
import IHeader from '@/components/header'
import Html from '@/components/html'
import navBottom from '@/components/navBottom'
import {fanhallIndex, fanhanBannerList, fanhallGongGao} from '@/api/fanhall'
import {getInfo} from '@/api/good'
import { WxcSpecialRichText, WxcLoading } from 'weex-ui'
const modal = weex.requireModule('modal')
export default {
  name: 'fanhall',
  data () {
    return {
      imageList: [],
      pageNo: 1,
      pageSize: 6,
      fanhallList: [],
      gongGaoList: [],
      animate: false,
      hasMore: true, // 是否还有数据
      needMask: true, // 显示蒙版
      loadingShow: true // loading
    }
  },
  methods: {
    pushToDetail (id) {
      this.$router.push({path: '/fanhall/contentDetail', query: {id: id}})
    },
    pushToPicDetail (id, picList) {
      const that = this
      that.$router.push({path: '/fanhall/picDetail', query: {id: id, picList: picList}})
    },
    showMarquee: function () {
      const that = this
      that.animate = true
      setTimeout(() => {
        that.gongGaoList.push(that.gongGaoList[0])
        that.gongGaoList.shift()
        that.animate = false
      }, 500)
    },
    getWordInfo (value, inx) {
      const that = this
      let params = {
        value: value,
        type: 'information_type'
      }
      // let str = ''
      that.$api.get(getInfo, params, function (res) {
        that.fanhallList[inx].description = res.data.description
        // str = res.data.description
      })
      // return str + '111'
    },
    getDataList () {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      that.loadingShow = true
      that.$api.get(fanhallIndex, params, function (res) {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        list.forEach((item, index) => {
          let params = {
            value: item.informationType,
            type: 'information_type'
          }
          that.$api.get(getInfo, params, function (res) {
            list[index].description = res.data.description
          })
        })
        that.fanhallList = that.fanhallList.concat(list)
      }, function () {
        that.loadingShow = false
      })
    },
    loadMore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    }
  },
  mounted: function () {
    const that = this
    that.getDataList()
    that.loadingShow = false
    that.$api.get(fanhanBannerList, {}, function (pic) {
      for (let i in pic.data) {
        that.imageList = pic.data[i]
      }
      that.loadingShow = false
    })
    that.$api.get(fanhallGongGao, {}, function (gongao) {
      that.gongGaoList = gongao.data
    })
    setInterval(that.showMarquee, 3000)
  },
  computed: {
    indicatorStyle () {
      const that = this
      let obj = {}
      obj.width = 16 * that.imageList.length + 10 * (that.imageList.length - 1)
      obj.left = (750 - obj.width) / 2
      return obj
    }
  },
  components: {
    IHeader,
    WxcSpecialRichText,
    Html,
    navBottom,
    WxcLoading
  }
}
</script>

<style scoped>
    /*.wrap{*/
        /*background-color: #fff;*/
    /*}*/
    .fanhall-container{
        background-color: #fff;
    }
    .xian{
        height: 20px;
        background-color: rgb(235,235,235);
    }

.gonggao{
    flex-direction: column;
    background-color: #fff;
}
.gonggaoImg{
    width: 750px;
    height: 390px;
}
    .gonggaoCon{
      flex-direction: row;
        justify-content: start;
        padding-left: 24px;
        padding-right: 24px;
        margin-top:35px;
        padding-bottom:30px;
        border-bottom-width: 1px;
        border-bottom-color: rgb(235,235,235);
        border-top-style: solid;
    }
    .name{
        font-size:24px;
        padding-right: 30px;
        border-right-width: 1px;
        border-right-color:#33334E ;
        color:#33334E
    }
    .content{
        font-size:24px;
        color:#33334E;
        padding-left:50px;
    }
    .jingxuan{
        background-color: #fff;
        padding-left:25px;
        padding-right: 25px;
        padding-top:23px;
        padding-bottom:23px;
    }
    .jingxuan-header{
        flex-direction: row;
        justify-content: space-between;
    }
    .tit1{
        font-size: 32px;
        font-weight: bold;
        /*lines:1;*/
        /*text-overflow: ellipsis;*/
        color:rgb(70,70,70)
    }
   .contentatr{
       flex-direction: column;
       height: 225px;
       justify-content: space-between;
   }
   .article{
       flex-direction: column;
       width:450px;
   }
    .pic{
        width: 225px;
    }
    .smImg{
        width:225px;
        height:225px;
        border-radius: 20px;
    }
    .contentDetail{
        font-size: 26px;
        line-height: 36px;
        color:rgb(70,70,70);
        lines:4;
        overflow: hidden;
        text-overflow: ellipsis;
        /*width: 425px;*/
        margin-top: 22px;
    }
    .payTime{
        flex-direction: row;
        justify-content: space-between;
        width: 425px;
        height: 50px;
        align-items: center;
    }
    .slider {
        width: 750px;
        height:390px;
    }
    .frame {
        width: 750px;
        height: 390px;
        position: relative;
    }
    .timeText{
        color: rgb(206,206,206);
        font-weight: bold;
        font-size: 22px;
    }
    .yellowText{
        font-size:22px;
        color:rgb(243,203,1);
        font-weight:bold;
    }
    .indicator{
        position:absolute !important;
        left:350px !important;
        bottom:30px;
    }
    .bigImg{
        width: 430px;
        height: 300px;
        border-radius: 20px;
    }
    .payTimeContent{
        width: 700px;
    }
    .marquee_top {
        transition: all 0.5s;
        margin-top: -30px
    }
    .marquee_list{
        width: 400px;
        height: 30px;
        overflow: hidden;
    }
    .picCon{
        width: 700px;
        height: 485px;
        margin-top: 16px;
        border-radius: 10px;
    }
    .title{
        width:700px;
        lines:1;
        text-overflow: ellipsis;
    }
    .smllImg{
        flex-direction: column;
        justify-content: space-between;
        width: 260px;
        height: 300px;
    }
    .smallImg{
        width: 260px;
        height: 148px;
        border-radius: 20px;
    }
    .list{
        height: 30px;
    }
    .wrap{
        margin-bottom: 60px;
    }
    .pictext{
        flex-direction: column;
    }
    .textWrap{
        flex-direction: row;
    }
    .marginLeft{
        margin-right: 10px;
    }
    .slider {
        width: 750px;
        height: 380px;
        margin-top: 86px;
    }
    .frame {
        width: 750px;
        height: 380px;
    }
    .banner {
        width: 750px;
        height: 380px;
    }
    .indicator {
        position: absolute;
        bottom: 16px;
        height: 16px;
        item-color: rgba(255, 255, 255, 0.1);
        item-selected-color: rgba(43, 48, 64, 0.2);
        item-size: 16px;
    }
    .lastMargin {
        margin-bottom: 100px;
    }
</style>
<!--<style>-->
    <!--.weex-indicator-item{-->
        <!--background-color: #fff !important;-->
        <!--border-width:1px;-->
        <!--border-style: solid;-->
        <!--border-color:rgba(43,48,64,0.1);-->
        <!--width: 16px;-->
        <!--height: 16px;-->
        <!--border-radius: 8px;-->
    <!--}-->
    <!--.weex-indicator-item-active{-->
        <!--background-color: rgba(43,48,64,0.2) !important;-->
        <!--border: none-->
    <!--}-->
<!--</style>-->
